<template>
  <div style="">

    <v-album v-if="isShowPic" :id="data.list[data.index].id" style="z-index: 1000"></v-album>

    <div v-else>
      <div class="mw-column-center-style mw-first-text-color"
           style="z-index:999;position:fixed;top:0;left:0;font-size:0.18rem;justify-content: center;height:0.5rem;width: 3.75rem;background-color: #FFCF0F;font-weight: bold">
        特惠
      </div>
      <img @click="skipToSaleFilter" style="z-index:999;position:fixed;top:0.13rem;right:0.15rem;width:0.24rem;height:0.24rem;object-fit: fill"
           src="/static/filter_icon.png"></img>
      <v-touch style="margin-top: 0.5rem;" @panstart.prevent="data.panStart"
               @panmove.prevent="data.panMove"
               @panend.prevent="data.panEnd" v-vuet-scroll="{ path: 'sale', name: 'content' }">
        <div v-for="(item,index) in data.list" class="container"
             :key="index"
             style="width:3.75rem;font-size:60px;"
             :style="{transition:`all ${data.transition(index)}s`,transform:`translateY(${data.top(index)})`,height:data.windowHeight+'px'}"
             :ref="`touch${index}`">
          <v-salefullscreenitem @receiveClickCollect="data.collect" @receiveClickBuy="data.skip" @receiveUserPage="skipToUserPage" :arrayindex="index"
                                :currentindex="data.index" :item="item"
                                :windowHeight="data.windowHeight"></v-salefullscreenitem>
        </div>
      </v-touch>
      <div class="mw-row-style"
           style="position:absolute;width:3.75rem;height:1rem;justify-content: center;align-items: center"
           :style="{transform:`translateY(${data.downFreshDistance}rem)`}">
        <img style="width:0.4rem;height:0.4rem;" src="/static/refresh_yellow.gif"></img>
        <div class="mw-third-text-color" style="font-size: 0.16rem;margin-left: 0.1rem;color:#ffffff">
          {{data.downFreshDes}}
        </div>
      </div>
      <div v-if="!loginStatus" @click="data.skipToLogin" class="mw-row-style" style="justify-content:flex-end;height:0.3rem;width:2.7rem;align-items: center;position:fixed;top:0.6rem;left:0.525rem;border-radius: 0.15rem;
   background-color: #262420;font-size:0.12rem;">
        <div style="color:#f9f9f9">登录后将为您过滤看过的特惠信息，</div>
        <div style="color:#FFCF0F">去登录</div>
        <img src="/static/guide_to_login.gif"
             style="margin-left:0.04rem;object-fit:cover;height:0.26rem;width:0.26rem;"/>
      </div>
      <div v-if="showGuide == true"
           style="width:3.75rem;object-fit:cover;position:fixed;top:0.5rem;left:0;background-color: rgba(0,0,0,0.5)"
           :style="{height:data.windowHeight+'px'}">

      </div>
      <img v-if="showGuide == true" @touchmove.prevent="hiddenGuide()" @click="hiddenGuide()"
           src="/static/guide_slide_sale.gif" style="width:3.75rem;object-fit:cover;position:fixed;top:0.5rem;left:0"
           :style="{height:data.windowHeight+'px'}"/>

    </div>
  </div>

</template>

<script>

  import utils from '../../utils'
  import {mapModules, mapRules} from 'vuet'

  export default {
    mixins: [
      mapModules({data: 'sale'}),
      mapRules({store: [{path: 'sale'}], need: [{path: 'sale'}]}),
    ],

    data() {
      return {
        loginStatus: false,
        showGuide: false,
        isShowPic: false
      }
    },

    created() {
      this.data.windowHeight = window.innerHeight - 0.5 * this.GLOBAL.ratio;
      this.data.switchdistance = this.data.windowHeight / 20
    },
    mounted() {
      this.data.needFetch = true
      this.loginStatus = this.$getLoginStatus()
      this.showGuide = localStorage.getItem("showGuide") == null ? true : localStorage.getItem("showGuide")
      var that = this
      window.addEventListener('hashchange', function () {
        if (window.location.href.indexOf("#viewpictures") != -1) {
          that.isShowPic = true
        } else {
          that.isShowPic = false
        }
      });
    },
    methods: {
      hiddenGuide() {
        this.showGuide = false
        localStorage.setItem("showGuide", this.showGuide)
      },
      skipToUserPage(id) {
        this.data.needFetch = false
      },
      skipToSaleFilter() {
        setTimeout(() => {
//          this.$router.push({ path: 'salefilter'})
          this.$pushRouteByJson({name: "salefilter"})
        }, 1)
        this.data.needFetch = false
//        this.$vuet.getModule("salefilter").needFetch = true
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .menu-input {
    font-size: 0.18rem;
    color: #333333;
    width: 2.6rem;
    border: none
  }
</style>
<style type="text/css">

  input::-webkit-input-placeholder { /*WebKit browsers*/
    font-size: 0.18rem;
    color: #cccccc;
  }


</style>
